@import "../ea-ui-base-style.scss";
@import "../ea-icon/index.scss";

.ea-progress_wrap {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  line-height: 1;
  height: 1rem;

  .ea-progress_track,
  .ea-progress_path {
    height: 0.5rem;
    line-height: 1;
    background-color: rgb(235, 238, 245);
    border-radius: 999px;
  }

  .ea-progress_track {
    width: 100%;

    .ea-progress_path {
      box-sizing: border-box;
      padding-right: 0.5rem;
      color: aliceblue;

      font-size: 0.8rem;
      text-align: right;

      width: 0%;
      background-color: $color-primary-bgc;

      transition: width 0.2s;
    }
  }

  .ea-progress_text {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    width: 3rem;
  }

  .ea-progress_text--circle,
  .ea-progress_text--dashboard {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
  }

  svg {
    circle {
      stroke-width: 4px;

      transform-origin: center center;
      transition: stroke-dashoffset 0.2s;
    }

    .track--circle,
    .path--circle {
      transform: rotate(-90deg);
    }

    .track--dashboard,
    .path--dashboard {
      transform: rotate(161deg);
    }
  }
}
